<template>
  <div>
    <el-row>
      <span>
        开始日期：
        <el-date-picker
          v-model="startDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd 00:00:00"
        >
        </el-date-picker>
      </span>
      <span>
        结束日期：
        <el-date-picker
          v-model="endDate"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd 23:59:59"
        >
        </el-date-picker>
      </span>
      <el-button @click="dateTimeSearch" style="margin-left: 1rem">提交查询</el-button>
      <el-button @click="showChooseTable">查看已选</el-button>
      <el-button @click="resetChoose">重置选择</el-button>
      <el-button type="plain" round @click="downloadTable" class="downloadBut">
        导出
        <i class="el-icon-download el-icon--right"></i>
      </el-button>
    </el-row>
    <el-table
      v-show="seenFormat"
      v-loading="showTableFormat"
      element-loading-text="拼命加载中"
      :data="tableData"
      border
      height="40rem"
      :key="tableKey"
      :row-class-name="tableRowClassName"
      :cell-class-name="cellClassName"
      @selection-change="handRowSelect"
    >
      <el-table-column
        label="选择类别"
        width="80"
        :filters="[
          { text: '查看街镇', value: 'street' },
          { text: '查看委办局', value: 'commission' },
          { text: '查看公司', value: 'company' },
        ]"
        type="selection"
        :filter-method="filterHandlerFormat"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableColumn"
        :key="index"
        :prop="Object.keys(item)[0]"
        width="70"
        :formatter="percentFormatter"
      >
        <template slot="header" slot-scope="scope">
          {{ Object.values(item)[0] }}
          <el-checkbox
            :checked="isChecked"
            @change="checkChooseClick(index, scope.column)"
            name="column"
          ></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
    <!--      总结模态框-->
    <div v-if="showTotalModal">
      <div
        class="modal show-total-modal"
        id="totalModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="totalLabel"
        aria-hidden="true"
        style="overflow-y: scroll"
      >
        <div class="modal-dialog total-modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <div class="total-font-style">
                {{ yearValue }}年1月至{{ monthValue }}数据分析(三大类)
              </div>
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
                @click="closeModal"
              >
                ×
              </button>
            </div>
            <div class="modal-body">
              <div id="excludeFive"></div>
              <div id="actuallySolved"></div>
              <div id="completedOnTime"></div>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-default"
                data-dismiss="modal"
                @click="closeModal"
              >
                关闭
              </button>
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
      <!-- /.modal -->
    </div>

    <!-- //隐藏的表格 -->
    <el-table
      :data="exportRow"
      class="table2excelCustom"
      v-show="exportTable"
      height="40rem"
      border
    >
      <el-table-column
        v-for="(item, index) in exportColumn"
        :key="index"
        :prop="Object.keys(item)[0]"
        width="70"
        :label="Object.values(item)[0]"
        :row-class-name="tableRowClassName"
        :cell-class-name="cellClassName"
        :formatter="percentFormatter"
      >
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import "../../public/js/jquery.table2excel";
import Format from "../components/Format";
export default {
  name: "Format",
  data() {
    return {
        street:[],
        company:[],
        commission:[],
      startDate: "",
      endDate: "",
      exportTable: false,
      exportColumn: [
        { responsible_department: "主责部门" },
        { accepted_quantity: "受理量" },
        { accepted_quantity_exclude0: " 受理量（号码为0)" },
        { accepted_quantity_exclude_five: "受理去五类" },
        { fact_not_true: "事实认定不属实" },
        { fact_not_true_rate: "事实认定不属实率" },
        { fact_not_true_rate_rank: "事实认定不属实率排序" },
        { chargeback_quantity: "退单量" },
        { chargeback_quantity_rank: "退单量排序" },
        { completed_quantity: "办结量" },
        { quantity_completed_on_time: "按时办结量" },
        { rate_completed_on_time: "按时办结率" },
        { rate_completed_on_time_rank: "按时办结率排序" },
        { quantity_actually_solved: "实际解决量2018" },
        { rate_actually_solved: "实际解决率" },
        { message_return_visit: "短信回访" },
        { telephone_return_visit: "电话回访" },
        { return_visit_exclude_no_statement: "回访量(去除未表态)" },
        { no_need_return_visit: "无需回访量" },
        { unable_return_visit: "无法回访量" },
        { quantity_contact_first: "先行联系量" },
        { rate_contact_first2: "先行联系率2" },
        { quantity_satisfied_visit: "回访满意件数" },
        { quantity_basic_satisfied_visit: "回访基本满意件数" },
        { quantity_general_satisfied_visit: "回访一般满意件数" },
        { quantity_dissatisfied_visit: "回访不满意件数" },
        {
          quantity_dissatisfied_but_satisfied_attitude:
            "回访不满意但态度满意件数",
        },
        { rate_district_satisfied_visit: "区级回访满意率" },
        { rate_district_satisfied_visit_rank: "区级回访满意率排序" },
        { practical_solution: "回访实际解决件数" },
        { practical_solution_rate: "回访实际解决率" },
        { accepted_case_exclude_five: " 受理数(去除五类，去除号码0)" },
        { review_number: "复核件" },
        { review_completed_on_time: "复核按时办结数" },
        { review_completed_on_time_rate: "复核按时办结率" },
        { emergency_number: "紧急数" },
        { secondary_emergency_number: "次紧急数" },
        { repeat_number: "重复数" },
      ],
      exportRow: [],
      seenFormat:true,
      isChecked: true,
      tableColumn: [
        { responsible_department: "主责部门" },
        { accepted_quantity: "受理量" },
        { accepted_quantity_exclude0: " 受理量（号码为0)" },
        { accepted_quantity_exclude_five: "受理去五类" },
        { fact_not_true: "事实认定不属实" },
        { fact_not_true_rate: "事实认定不属实率" },
        { fact_not_true_rate_rank: "事实认定不属实率排序" },
        { chargeback_quantity: "退单量" },
        { chargeback_quantity_rank: "退单量排序" },
        { completed_quantity: "办结量" },
        { quantity_completed_on_time: "按时办结量" },
        { rate_completed_on_time: "按时办结率" },
        { rate_completed_on_time_rank: "按时办结率排序" },
        { quantity_actually_solved: "实际解决量2018" },
        { rate_actually_solved: "实际解决率" },
        { message_return_visit: "短信回访" },
        { telephone_return_visit: "电话回访" },
        { return_visit_exclude_no_statement: "回访量(去除未表态)" },
        { no_need_return_visit: "无需回访量" },
        { unable_return_visit: "无法回访量" },
        { quantity_contact_first: "先行联系量" },
        { rate_contact_first2: "先行联系率2" },
        { quantity_satisfied_visit: "回访满意件数" },
        { quantity_basic_satisfied_visit: "回访基本满意件数" },
        { quantity_general_satisfied_visit: "回访一般满意件数" },
        { quantity_dissatisfied_visit: "回访不满意件数" },
        {
          quantity_dissatisfied_but_satisfied_attitude:
            "回访不满意但态度满意件数",
        },
        { rate_district_satisfied_visit: "区级回访满意率" },
        { rate_district_satisfied_visit_rank: "区级回访满意率排序" },
        { practical_solution: "回访实际解决件数" },
        { practical_solution_rate: "回访实际解决率" },
        { accepted_case_exclude_five: " 受理数(去除五类，去除号码0)" },
        { review_number: "复核件" },
        { review_completed_on_time: "复核按时办结数" },
        { review_completed_on_time_rate: "复核按时办结率" },
        { emergency_number: "紧急数" },
        { secondary_emergency_number: "次紧急数" },
        { repeat_number: "重复数" },
      ],
      showTableFormat: false, //是否显示表格加载
      tableKey: 1,
      showTotalModal: false, //总结模态框是否展示
      totalData: [],
      tableData: [],
      multipleSelection: [],
    };
  },
  activated() {},
  methods: {
    percentFormatter(row,column,cellValue,index)
    {
      if (column.property == 'fact_not_true_rate' || column.property == 'rate_actually_solved' ||
          column.property == 'rate_completed_on_time' ||column.property == 'rate_contact_first2' ||
          column.property == "rate_district_satisfied_visit"  ||column.property =="practical_solution_rate" ||
        column.property == "review_completed_on_time_rate"
      )
      {
        return cellValue+"%";
      }
      else return cellValue;
    },

    resetChoose() {
      this.exportTable = false;
      this.seenFormat = true;
    },
    // 查看选择的表格
    showChooseTable() {
      this.seenFormat = false;
      this.exportTable = true;
    },
    //  选择列触发
    checkChooseClick(columnindex, column) {
      let index = -1;
      this.exportColumn.findIndex((val, currentIndex) => {
        if (Object.keys(val)[0] == column.property) {
          index = currentIndex;
        }
      });
      if (index == -1) {
        this.exportColumn.splice(
          columnindex,
          0,
          this.tableColumn.find((item, i) => {
            if (i == columnindex) {
              return item;
            }
          })
        );
      } else {
        let exportindex = -1;
        this.exportColumn.findIndex((item, index) => {
          if (Object.keys(item)[0] == column.property) {
            exportindex = index;
          }
        });
        this.exportColumn.splice(exportindex, 1);
      }
    },
    //选择触发的函数
    handRowSelect(row) {
      this.exportRow = [];
      this.exportRow = row;
    },

    // 过滤查看类别
    filterHandlerFormat(value, row, column) {
      console.log(row)
      return row.categoryType === value;
    },
    //初始化年月

    cellClassName({ row, rowIndex, columnIndex }) {
      if (columnIndex == 0 && row.responsible_department == "总计") {
        return "red-cell";
      }
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.responsible_department == "总计") {
        return "warning-row";
      }
      return "";
    },
    dateTimeSearch() {
      this.exportTable = false;
        this.seenFormat = true;
        this.showTableFormat=true;
      this.tableKey = Math.random();
      this.tableData = [];
    //   const _this = this;
      if (this.startDate != "" && this.endDate != "") {
        this.$axios({
          method: "post",
          url: "/report/getCustomTimeAllColumnOfStreet.action",
          data: {
            startTime:this.startDate,
            endTime:this.endDate,
          },
        }).then((response) =>{
            console.log(response);
           this.street = response.data.content.street
             let tmpStreetData = this.street;
            this.changeDataFormat(tmpStreetData);
              tmpStreetData.forEach(item=>{
                this.tableData.push(item)
            });
          this.showTableFormat = false;
               });
        this.$axios({
          method: "post",
          url: "/report/getCustomTimeAllColumnOfCommission.action",
          data: {
            startTime:this.startDate,
            endTime:this.endDate,
          },
        }).then((response)=> {
            console.log(response);
           this.commission = response.data.content.commission
             let tmpCommissionBureauData = this.commission;

            this.changeDataFormat(tmpCommissionBureauData);
            for (let i = 0; i < tmpCommissionBureauData.length; i++) {
              this.tableData.push(tmpCommissionBureauData[i]);
            }
               });
        this.$axios({
          method: "post",
          url: "/report/getCustomTimeAllColumnOfCompany.action",
          data: {
            startTime:this.startDate,
            endTime:this.endDate,
          },
        }).then((response)=> {
                console.log(response);
          this.company = response.data.content.company
               let tmpCompanyData = this.company;
            this.changeDataFormat(tmpCompanyData);
            for (let i = 0; i < tmpCompanyData.length; i++) {
              this.tableData.push(tmpCompanyData[i]);
            }
               });
          //   _this.totalData = response.data.content;


        // this.selectAll()
      }
    },
    changeDataFormat(tempData) {
      
      const keysArr = Object.keys(tempData[0]);
      const tempObj = {};
      keysArr.forEach((el, index) => {
        if (el == "responsible_department") {
          tempObj[el] = "总计";
        } else if (el == "categoryType") {
          tempObj[el] = tempData[0]["categoryType"];
        } else {
          if (
            el != "review_completed_on_time_rate" &&
            el != "year" &&
            el != "department_type" &&
            el != "rate_completed_on_time" &&
            el != "fact_not_true_rate" &&
            el != "practical_solution_rate" &&
            el != "undertake_satisfied_rate" &&
            el != "id" &&
            el != "rate_actually_solved" &&
            el != "responsible_department" &&
            el != "rate_district_satisfied_visit" &&
            el != "rate_contact_first" &&
            el != "rate_contact_first2" &&
            el != "month" &&
            el != "fact_not_true_rate_rank" &&
            el != "chargeback_quantity_rank" &&
            el != "rate_completed_on_time_rank" &&
            el != "rate_contact_first_rank" &&
            el != "rate_district_satisfied_visit_rank"
          ) {
            let newData = tempData.reduce((sum, cur, index) => {
              return sum + cur[el];
            }, 0);
            tempObj[el] = newData;
          } else {
            tempObj[el] = "";
          }
        }
      });
      tempData.push(tempObj);
    },
    downloadTable() {
      // this.checkChooseClick()
      $(".table2excelCustom").table2excel({
        // exclude: ".Ex", //class="noExl"的列不导出
        name: "Excel Document Name",
        filename: "松江区数据统计" + ".xls", //文件名称
        fileext: ".xls", //文件后缀名
        exclude_img: true, //导出图片
        exclude_links: true, //导出超链接
        exclude_inputs: true, //导出输入框内容
      });
    },

    // showModal(row, event, column) {
    //   var _this = this;
    //   if (
    //     row.responsible_department == "总计" &&
    //     event.property == "responsible_department"
    //   ) {
    //     this.showTotalModal = true;
    //
    //     //    请求数据 画echarts图
    //     this.$axios({
    //       method: "get",
    //       url:
    //         "/report/getThisYearFromNowOnMonthThreeItemOfThreeCategory.action?year=" +
    //         _this.yearValue +
    //         "&month=" +
    //         _this.getMonthSubStr(_this.monthValue),
    //     })
    //       .then(function (response) {
    //         console.log(response.data.content);
    //         var commissionBureau = response.data.content.commissionBureau;
    //         var company = response.data.content.company;
    //         var monthArr = response.data.content.monthArr;
    //         var street = response.data.content.street;
    //         //受理去5类
    //         var streetDataExcludeFive = [];
    //         var companyDataExcludeFive = [];
    //         var commissionBureauDataExcludeFive = [];
    //         //实际解决
    //         var streetDataActuallySolved = [];
    //         var companyDataActuallySolved = [];
    //         var commissionBureauDataActuallySolved = [];
    //         //按时解决
    //         var streetDataCompletedOnTime = [];
    //         var companyDataCompletedOnTime = [];
    //         var commissionBureauDataCompletedOnTime = [];
    //         //组装对应数据
    //         for (let i = 0; i < commissionBureau.length; i++) {
    //           streetDataExcludeFive.push(
    //             street[i].sum_accepted_quantity_exclude_five
    //           );
    //           companyDataExcludeFive.push(
    //             company[i].sum_accepted_quantity_exclude_five
    //           );
    //           commissionBureauDataExcludeFive.push(
    //             commissionBureau[i].sum_accepted_quantity_exclude_five
    //           );
    //           streetDataActuallySolved.push(
    //             street[i].sum_quantity_actually_solved
    //           );
    //           companyDataActuallySolved.push(
    //             company[i].sum_quantity_actually_solved
    //           );
    //           commissionBureauDataActuallySolved.push(
    //             commissionBureau[i].sum_quantity_actually_solved
    //           );
    //           streetDataCompletedOnTime.push(
    //             street[i].sum_quantity_completed_on_time
    //           );
    //           companyDataCompletedOnTime.push(
    //             company[i].sum_quantity_completed_on_time
    //           );
    //           commissionBureauDataCompletedOnTime.push(
    //             commissionBureau[i].sum_quantity_completed_on_time
    //           );
    //         }
    //         _this.drawLineGraph(
    //           "excludeFive",
    //           "受理量去五类",
    //           monthArr,
    //           streetDataExcludeFive,
    //           companyDataExcludeFive,
    //           commissionBureauDataExcludeFive
    //         );
    //         _this.drawLineGraph(
    //           "actuallySolved",
    //           "实际解决量2018",
    //           monthArr,
    //           streetDataActuallySolved,
    //           companyDataActuallySolved,
    //           commissionBureauDataActuallySolved
    //         );
    //         _this.drawLineGraph(
    //           "completedOnTime",
    //           "按时结办量",
    //           monthArr,
    //           streetDataCompletedOnTime,
    //           companyDataCompletedOnTime,
    //           commissionBureauDataCompletedOnTime
    //         );
    //       })
    //       .catch(function (error) {
    //         console.log(error);
    //       });
    //   }
    // },
    closeModal() {
      this.showTotalModal = false;
    },
    drawLineGraph(
      id,
      title,
      xAxisData,
      streetData,
      companyData,
      commissionBureauData
    ) {
      var myChart = this.$echarts.init(document.getElementById(id));
      let _this = this;
      var option = {
        title: {
          text: title,
        },
        tooltip: {
          formatter(params) {
            return (
              params.seriesName +
              "<br>" +
              params.name +
              title +
              ":" +
              params.value
            );
          },
        },
        legend: {
          data: ["街镇", "委办局", "公司"],
          right: "20%",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          show: true,
          feature: {
            magicType: {
              type: ["line", "bar"],
            }, //切换为折线图，切换为柱状图
            saveAsImage: {}, //保存为图片
          },
        },

        xAxis: {
          name: "月份",
          type: "category",
          data: xAxisData,
        },
        yAxis: {
          name: "案件数量",
          type: "value",
        },
        series: [
          {
            name: "街镇",
            type: "line",
            data: streetData,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.82)",
            },
            itemStyle: {
              normal: {
                label: { show: true },
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#83bff6" },
                  { offset: 0.5, color: "#188df0" },
                  { offset: 1, color: "#188df0" },
                ]),
              },
            },
            emphasis: {
              itemStyle: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#2378f7" },
                  { offset: 0.7, color: "#2378f7" },
                  { offset: 1, color: "#83bff6" },
                ]),
              },
            },
          },
          {
            name: "委办局",
            type: "line",
            data: commissionBureauData,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.82)",
            },
            itemStyle: {
              normal: {
                label: { show: true },
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#36cfc9" },
                  { offset: 0.5, color: "#13c2c2" },
                  { offset: 1, color: "#08979c" },
                ]),
              },
            },
            emphasis: {
              itemStyle: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#08979c" },
                  { offset: 0.7, color: "#13c2c2" },
                  { offset: 1, color: "#36cfc9" },
                ]),
              },
            },
          },
          {
            name: "公司",
            type: "line",
            data: companyData,
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.82)",
            },
            itemStyle: {
              normal: {
                label: { show: true },
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#73d13d" },
                  { offset: 0.5, color: "#52c41a" },
                  { offset: 1, color: "#389e0d" },
                ]),
              },
            },
            emphasis: {
              itemStyle: {
                color: new _this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#389e0d" },
                  { offset: 0.7, color: "#52c41a" },
                  { offset: 1, color: "#73d13d" },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {},
};
</script>
<style>
.hidden-type {
  display: none;
}
.hotlineReport {
  width: 100%;
  height: 100%;
}

.downloadBut {
  float: right;
  margin-bottom: 20px;
}

.el-table td,
.el-table th {
  text-align: center;
}

.el-table td {
  text-align: center;
}

.el-table .warning-row {
  background-color: #82c0fc;
}

.el-table .red-cell {
  background-color: #1890FF;
  color: white;
  cursor: pointer;
}

.el-table .red-cell:hover {
  color: #1a1a1a;
}

.show-total-modal {
  display: block;
  background-color: rgba(0, 0, 0, 0.3);
}

#excludeFive {
  height: 400px;
}

#actuallySolved {
  height: 400px;
}

#completedOnTime {
  height: 400px;
}

@media (min-width: 992px) {
  .total-modal-dialog {
    max-width: 65%;
    max-height: 100%;
  }
}

.total-font-style {
  font-size: 20px;
  font-weight: bold;
}
</style>
